<template>  
	<div>
		<div class="btn">
			<el-button @click="download()">下载检导单</el-button>
		</div>
		<div class="medical-report" id="main">
			<div style=" float: right;margin-top: -10px;height: 40px"> 
				<barcode class="barcode" :value="barcodeValue" format="code128" :width="1.5" :height="40" >
					条形码显示失败时的内容
				</barcode>
			</div>
			<h2 style="margin-left: 12%">体检导单</h2>  
			<hr>
			<div>
				<table>
				<tr>
					<th>患者姓名</th>
					<th>性别</th>
					<th>联系电话</th>
					<th>导检号</th>
					<th>年龄</th>
					<th>身份证</th>
					<th>登记日期</th>
				</tr>
				<tr>
					<td>{{info.patientName}}</td>
					<td>{{info.patientSex}}</td>
					<td>{{info.patientPhone}}</td>
					<td>{{ barcodeValue }}</td>
					<td>{{info.patientAge}}</td>
					<td>{{info.patientIdCard}}</td>
					<td>{{guidanceSheet.orderCreateTime}}</td>
				</tr>
				</table>
			</div>
			<hr>
			<div class="tishi">
				温馨提示：
				<br>
				1.抽血后请按压5分钟
				<br>
				2.妇科B超请先胀尿
				<br>
				3.请勿做x线检查或者其它放射性检查
				<br>
				4.未婚女性勿做妇检、TCT
			</div>
			<hr>
		<table>  
			<thead>  
			<tr>  
				<th>科室-项目</th> 
				<th>项目/套餐</th>  
				<th>费用（元）</th>
				<th>签名</th>  
			</tr>  
			</thead>  
			<tbody>  
				<tr v-for="(item,index) in this.project.length" :key="index">  
					<td> {{ departName[index] }}</td>  
					<td> {{ project[index] }}</td>  
					<td>{{ projectPrice[index] }}</td>  
					<td></td>
				</tr>  
				<tr >  
					<td style="text-align: right" colspan="4">合计: {{ total }} 元</td>  
				</tr>
			</tbody>  
		</table>  
		<div class="deal">处理人：{{ $store.state.adminName }}</div>

		</div>  
	</div>
	
</template>  
<script>  
// 引入VueBarcode组件  
import VueBarcode from 'vue-barcode';  
import html2canvas from 'html2canvas';  
import jsPDF from 'jspdf';  
export default {  
	data(){
		return{
			// 初始条形码数据为空  
			// 初始时随机生成条形码的值  
			barcodeValue: "",
			guidanceSheet:{},
			//存项目信息，无法访问二级，解决就是再弄一个数组，来存cyPatient
			info:{},
			//来存项目名称
			project:[],
			//来存项目价格
			projectPrice:[],
			//来存科室名
			departName:[],
			//计算总价格
			total:0,
			//获取当前是套餐还是项目
			proOrCom:1,
		}
	}, 
	components: {  
		// 注册VueBarcode组件  
		barcode: VueBarcode  
	},
	
	methods:{
		generateBarcode() {  
			this.barcodeValue = this.guidanceSheet.orderExaminationId;  
		},
		getInfo(){
			//根据名称来请求获取价格
			this.project = this.guidanceSheet.orderInfo.split(",")
			for(var i = 0; i<this.project.length;i++){
				let params = "" + this.project[i]
				//获取价格
				//得先要判断是获取项目得价格还是套餐的价格，将状态值传入过去
				this.$axios.get(
					'/order/getProjectPrice',
					{
						params:{
							status:this.proOrCom,
							name:params
						}
					}
				).then(res=>{
					if(res != undefined){
						this.total = this.total + res.data
						this.projectPrice.push(res.data)
					}
				})
				//获取科室昵称
				this.$axios.get(
					'/order/getDepartName',
					{
						params:{
							status:this.proOrCom,
							name:params
						}
					}
				).then(res=>{
					if(res != undefined){
						this.departName.push(res.data)
					}
				})
			}
			
		},
		//生成pdf文件
		async download() {  
			try {  
				// 将需要生成PDF的DOM元素转换为Canvas  
				const element = document.getElementById('main'); // 这里选择整个div作为示例  
				const canvas = await html2canvas(element);  
		
				// 使用jsPDF将Canvas转换成PDF  
				const imgData = canvas.toDataURL('image/png');  
				//jsPDF('p', 'mm', 'a4') 第一个参数p（portrait）意思是纵向，横向为l（landscape）
          		//第二个参数是单位，mm是毫米，第三个是文档页面的大小
				const pdf = new jsPDF('p', 'mm', 'a4'); // A4大小，纵向  
				const imgWidth = pdf.internal.pageSize.getWidth();  
				const imgHeight = canvas.height * imgWidth / canvas.width;  
		
				pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);  
				pdf.save('检导单.pdf'); // 保存PDF  
			} catch (error) {  
				console.error('生成PDF失败:', error);  
			}  
		},  
		
	},
	
	mounted() {  
		//从本地储存里面获取原来检导单上的一整条数据，并解析出来
		this.guidanceSheet = JSON.parse(localStorage.getItem("guidanceSheet"));
		this.info = this.guidanceSheet.cyPatient;
		// 组件挂载后立即生成一个条形码  
    	this.generateBarcode(); 
		//获取状态
		this.proOrCom = this.guidanceSheet.orderProOrCom;
		//调用获取每一项价格的方；
		this.getInfo();
  	}
}  
</script>  

<style scoped>  

.medical-report {  
	width: 100%;  
	max-width: 800px;  
	margin: 0 auto;  
	padding: 20px;  
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
}  

table {  
	width: 100%;  
	border-collapse: collapse;  
	margin-bottom: 20px;  
}  

th, td {  
	border: 1px solid #ccc;  
	padding: 8px;  
	text-align: left;  
}  

th {  
	background-color: #f2f2f2;  
}  

.patient-info p {  
	margin-bottom: 5px;  
}  

.patient-info strong {  
	font-weight: bold;  
	color: #333;  
}  
hr{
	border: 1px solid #000;
}
.tishi{
	text-align: left;
	color:#525151
}
.btn{
	float: left;
	margin-left: 120px;
	margin-top: 10px
}
.deal{
	float: left;
}
</style>